<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<style>
			.span_btn button {
				padding: 4px 10px;
				margin-top: 5px;
				margin-right: 5px;
			}
			.red-point{
			  position: relative;
			}
			.red-point::before{
			  content: " ";
			  border: 5px solid #C9394A;/*设置红色*/
			  border-radius:5px;/*设置圆角*/
			  position: absolute;
			  z-index: 3000;
			  right: 0%;
			  margin-right: -10px;
			  margin-top: 0px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<ul id="friendRequestListUl" class="mui-table-view">

			</ul>
			<ul id="chatSnapshotUl" class="mui-table-view">
				<!-- <li friendUserinfo="' + btoa(JSON.stringify(friend)) + '" class="mui-table-view-cell mui-media chat-with-this-friend">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
				    <img class="mui-media-object mui-pull-left" src="image/arrow.jpg">
				    <div class="mui-media-body mui-slider-handle">
					    <span class="red-point">张三</span>
					    <p class="mui-ellipsis">消息</p>
				    </div>
			    </li> -->
			</ul>
		</div>
		<script src="js/mui.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				// 加载好友请求记录
				var curWebview = plus.webview.currentWebview();
				curWebview.addEventListener("show", function() {
					loadingFriendRequests();
				});
				
				// 添加自定义事件，页面
				window.addEventListener("refresh", function() {
					// 加载好友请求列表
					loadingFriendRequests();
					
					// 加载好友聊天快照
					loadChatSnapshotList();
					
					// 初始化WebSocket聊天模块
					Chat.init();
				});
				// 从缓存中读取所有的历史聊天记录
				//Chat.init();
				// 为每一个好友聊天快照记录li添加点击事件，跳转到对应的聊天界面
				mui("#chatSnapshotUl").on("tap", ".chat-with-this-friend", function() {
					var userinfo = app.getGlobalUserInfo();
					var friendUserinfo = JSON.parse(decodeURIComponent(escape(atob(this.getAttribute("friendUserinfo")))));
					// 打开聊天主页面
					mui.openWindow({
						url: "chatting.html",
						id: "chatting-" + friendUserinfo.friendUserId,
						extras: {
							friendUserinfo: friendUserinfo
						}
					});
					// 标记未读状态为已读
					app.markUserChatSnapshotRead(userinfo.id, friendUserinfo.friendUserId);
					// 重新渲染快照消息列表
					loadChatSnapshotList();
				});
				
				// 为每一个好友聊天快照记录li左滑的删除按钮添加点击事件
				// 左滑删除聊天快照和记录
				mui("#chatSnapshotUl").on("tap", ".chat-snapshot-del-btn", function() {
					var userinfo = app.getGlobalUserInfo();
					//var friendUserInfo = JSON.parse(atob(this.parentNode.parentNode.getAttribute("friendUserinfo")));
					var friendUserId = this.getAttribute("friendUserId");
					app.delUserChatHistory(userinfo.id, friendUserId);
					app.delUserChatSnapshot(userinfo.id, friendUserId);
					// 删除消息后重新渲染快照列表
					//loadChatSnapshotList();
					// 删除对应的li
					this.parentNode.parentNode.remove();
				});
			});
			
			// websocket聊天业务
			window.Chat = {
				socket: null,
				init: function() {
					// 判断当前浏览器是否支持WebSocket
					if (window.WebSocket) {
						// 如果当前的连接状态已经连接，那就不需要重复初始化WebSocket了
						if(app.socketIsReady(Chat.socket)) {
							return;
						}
						
						Chat.socket = new WebSocket(app.nettyServerUrl);
						Chat.socket.onopen = Chat.wsOpen;
						Chat.socket.onclose = Chat.wsClose;
						Chat.socket.onerror = Chat.wsError;
						Chat.socket.onmessage = Chat.wsReceiveMsg;
					} else {
						alert("手机设备过旧，请升级手机设备！");
					}
				},
				wsOpen: function() {
					console.log("WebSocket连接已建立...");
					// 第一次（或重连）初始化连接，需要给发消息给服务器
					// 获取用户全局对象
					var userinfo = app.getGlobalUserInfo();
					// 构建ChatMsgDTO对象
					var chatMsgDTO = new app.ChatMsgDTO(userinfo.id);
					// 构建DataContentDTO对象
					var dataContentDTO = new app.DataContentDTO(app.MsgActionEnum.CONNECT, chatMsgDTO);
					// 发送消息
					Chat.wsSendMsg(JSON.stringify(dataContentDTO));
					// 连接上WebSocket服务器之后加载未签收的消息
					loadUnsignedMsgList();
					
					// 定时发送心跳
					// setInterval("Chat.keepalive()", 10 * 1000);
				},
				wsClose: function() {
					console.log("WebSocket连接已关闭...");
				},
				wsError: function() {
					console.log("发生错误！");
				},
				// 批量签收消息，将多个ID以逗号隔开，保存在extend字段中
				signMsgList: function(unsignedMsgIdsStr) {
					var dataContent = new app.DataContentDTO(app.MsgActionEnum.SIGNED, null, unsignedMsgIdsStr);
					Chat.wsSendMsg(JSON.stringify(dataContent));
				},
				wsReceiveMsg: function(e) {
					console.log("接收到消息：" + e.data);
					var dataContentDTO = JSON.parse(e.data);
					// 如果消息类型是 提醒刷新通讯录，重新拉取好友列表
					if(dataContentDTO.action === app.MsgActionEnum.PULL_FRIENDS) {
						console.log("更新通讯录...");
						// 自己的好友请求被别人通过后需要重新加载通讯录
						var addressBookWebview = plus.webview.getWebviewById("addressBook.html");
						// 先更新缓存
						addressBookWebview.evalJS("loadMyFriendsFromDB()");
						mui.fire(addressBookWebview, "refresh");
					}
					// 否则去将消息渲染到对应的聊天界面上
					else {
						//receiveMsg(e.data);
						// 调用聊天Webview接收消息的方法
						// 获取聊天主界面的webview，用于调用渲染接收到的消息
						var chatMsgDTO = dataContentDTO.chatMsgDTO;
						var chattingWebview = plus.webview.getWebviewById("chatting-" + chatMsgDTO.sendUserId);
						// 设置的消息的默认状态为未读
						var isRead = false;
						// 接收方只要离开聊天主页面，页面就会被释放，从而消息就没有被签收，消息的读取状态就是false
						if(chattingWebview != null) {
							// 调用聊天列表webview的WebSocket发送消息
							chattingWebview.evalJS("receiveMsg('" + chatMsgDTO.msg + "')");
							// 刷新聊天窗口，滚动到最下方
							chattingWebview.evalJS("resizeScreen()");
							// 聊天页面开着，设置为已读
							isRead = true;
						}
						
						// 接收到消息之后，对消息进行签收
						console.log("发送签收消息...")
						Chat.signMsgList(chatMsgDTO.msgId);
						
						//console.log("消息读取状态：" + isRead);
						// 保存聊天历史记录到本地缓存
						// console.log("保存聊天历史记录到本地缓存");
						app.saveUserChatHistory(chatMsgDTO.acceptUserId, chatMsgDTO.sendUserId, chatMsgDTO.msg, false);
						// 保存用户聊天快照到本地缓存
						app.saveUserChatSnapshot(chatMsgDTO.acceptUserId, chatMsgDTO.sendUserId, chatMsgDTO.msg, isRead);
						// 接收到消息需要重新渲染快照列表
						loadChatSnapshotList();
					}
				},
				wsSendMsg: function(msg) {
					// 如果当前Websocket的状态是已打开，则直接发送，否则重连
					if(app.socketIsReady(Chat.socket)) {
						Chat.socket.send(msg);
						// 发送完消息之后需要重新渲染快照列表
						loadChatSnapshotList();
					}
					// 连接未打开的话尝试重连
					else {
						console.log("尝试重新建立Websocket连接...");
						Chat.init();
						console.log("过1秒后尝试重连后发送消息...");
						setTimeout("Chat.wsResendMsg('" + msg + "')", 1000);
					}
				},
				wsResendMsg: function(msg) {
					if(app.socketIsReady(Chat.socket)) {
						Chat.socket.send(msg);
						// 重发完消息之后需要重新渲染快照列表
						loadChatSnapshotList();
					} else {
						console.log("重连失败，消息丢失!");
					}
				},
				keepalive: function() {
					// 构建心跳类型的消息
					var dataContentDTO = new app.DataContentDTO(app.MsgActionEnum.KEEPALIVE);
					// 发送心跳
					Chat.wsSendMsg(JSON.stringify(dataContentDTO));
					
					// 定时执行函数，重新加载未签收的消息，刷新通讯录
					loadUnsignedMsgList();
					var addressBookWebview = plus.webview.getWebviewById("addressBook.html");
					addressBookWebview.evalJS("loadMyFriendsFromDB()");
				}
			}

			// 加载好友请求记录列表
			function loadingFriendRequests() {
				// 获取用户全局对象
				var userinfo = app.getGlobalUserInfo();
				
				mui.ajax(app.serverUrl + "/user/queryFriendRequestList",{
					data:{
						acceptUserId:userinfo.id
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},	              
					success:function(data){
						// 控制台中输入日志
						if(data.status == 200) {
							// console.log(JSON.stringify(data.data));
							var friendRequestListUl = document.getElementById("friendRequestListUl")
							var friendRequestList = data.data;
							if(friendRequestList != null && friendRequestList.length > 0) {
								// 拼接好友请求列表
								var lis = [];
								for(var i = 0; i < friendRequestList.length; i ++) {
									// 只在页面上展示没有处理过的添加好友请求
									if(friendRequestList[i].requestStatus == 0) {
										lis.push(renderFriendRequest(friendRequestList[i]));
									}
								}
								friendRequestListUl.innerHTML = lis.join('');
								
								// 动态对忽略、通过拒绝按钮进行事件绑定
								mui(".btn_oper").on("tap", ".ignoreRequest", function() {
									var friendId = this.getAttribute("friendId");
									operateFriendRequest(userinfo.id, friendId, 3);
								});
								
								mui(".btn_oper").on("tap", ".passRequest", function() {
									var friendId = this.getAttribute("friendId");
									operateFriendRequest(userinfo.id, friendId, 1);
								});
								
								mui(".btn_oper").on("tap", ".refuseRequest", function() {
									var friendId = this.getAttribute("friendId");
									operateFriendRequest(userinfo.id, friendId, 2);
								});
							} else {
								friendRequestListUl.innerHTML = "";
							}
						} else {
							app.showToast(data.msg, "error");
						}
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
				
			}
			/**
			 * @param {Object} myUserId	：当前用户ID
			 * @param {Object} friendUserId ：待添加好友用户ID
			 * @param {Object} operType	：操作类型（1：已接受，2：已拒绝，3：已忽略）
			 */
			function operateFriendRequest(myUserId, friendUserId, operType) {
				// console.log(myUserId + ", " + friendUserId + ", " + operType);
				mui.ajax(app.serverUrl + "/user/operateFriendRequest", {
					data:{
						acceptUserId: myUserId,
						sendUserId: friendUserId, 
						requestStatus: operType
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(data) {
						//服务器返回响应
						plus.nativeUI.closeWaiting();
						if (data.status == 200) {
							if(operType == 1) {
								app.showToast("已同意...", "success");
								
								// 更新缓存中的通讯录信息
								app.setAddressList(data.data);
								// 通过好友请求需要重新加载通讯录
								var addressBookWebview = plus.webview.getWebviewById("addressBook.html");
								mui.fire(addressBookWebview, "refresh");
							} else if(operType == 2) {
								app.showToast("已拒绝...", "success");
							} else if(operType == 3) {
								app.showToast("已忽略...", "success");
							}
							// 重新加载请求列表
							loadingFriendRequests();
						} else {
							app.showToast(data.msg, "error");
						}
					}
				});
			}
							
			// 渲染好友请求记录列表中的某一项
			function renderFriendRequest(friend) {
				var html =  '<li class="btn_oper mui-table-view-cell mui-media">' +
								'<a href="javascript:;">' +
								'<img class="mui-media-object mui-pull-left" src="' + app.imgServerUrl + friend.sendFaceImage + '">' +
								'<span class="span_btn mui-pull-right">' +
									'<button friendId="' + friend.sendUserId + '" type="button" class="ignoreRequest mui-btn mui-btn-grey">忽略</button>' +
									'<button friendId="' + friend.sendUserId + '" type="button" class="passRequest mui-btn mui-btn-green">通过</button>' +
									'<button friendId="' + friend.sendUserId + '" type="button" class="refuseRequest mui-btn mui-btn-danger">拒绝</button>' +
								'</span>' +
								'<div class="mui-media-body">' +
									'<label>' + friend.sendUsername + '</label>' +
									'<p class="mui-ellipsis">请求添加你为好友</p>' +
								'</div>' +
								'</a>' +
						    '</li>';
				return html;
			}
			
			/**
			 * 获取渲染后的已读的聊天快照列表项的HTML
			 */
			/* function getReadChatSnapshotHtml() {
				
			} */
			
			/**
			 * 获取渲染后的未读的聊天快照列表项的HTML
			 * @param {Object} friend	：好友属性[friendUserId, friendUsername, friendFaceImage, friendNickname]
			 * @param {Object} msg		：快照中的消息
			 * @param {Object} isRead	：消息已读还是未读
			 */
			function getChatSnapshotHtml(friend, msg, isRead) {
				return '<li friendUserinfo="' + btoa(unescape(encodeURIComponent(JSON.stringify(friend)))) + '" class="mui-table-view-cell mui-media chat-with-this-friend">' +
						   '<div class="mui-slider-right mui-disabled">' +
							   '<a friendUserId="' + friend.friendUserId + '" class="mui-btn mui-btn-red chat-snapshot-del-btn">删除</a>' +
						   '</div>' +
						   '<img class="mui-media-object mui-pull-left" src="' + app.imgServerUrl + friend.friendFaceImage + '">' +
						   '<div class="mui-media-body mui-slider-handle">' +
							   (isRead ? friend.friendNickname : '<span class="red-point">' + friend.friendNickname + "</span>") +
							   '<p class="mui-ellipsis">' + msg + '</p>' +
						   '</div>' +
					   '</li>';
			}
			
			/**
			 * 每次重连后获取服务器未签收的消息列表
			 */
			function loadUnsignedMsgList() {
				//console.log("获取未签收的消息");
				var userinfo = app.getGlobalUserInfo();
				mui.ajax(app.serverUrl + "/user/getUnsignedMsgListByUserId", {
					data:{
						userId: userinfo.id
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},	              
					success:function(data) {
						//服务器返回响应
						plus.nativeUI.closeWaiting();
						if (data.status == 200) {
							var unsignedMsgList = data.data;
							var ids = [];
							for(var i = 0; i < unsignedMsgList.length; i++) {
								// 1.逐条保存聊天记录到本地
								app.saveUserChatHistory(unsignedMsgList[i].acceptUserId, unsignedMsgList[i].acceptUserId.sendUserId, unsignedMsgList[i].acceptUserId.msg, false);
								// 2.保存用户聊天快照到本地缓存，只需要保存最后一条消息即可
								if(i == unsignedMsgList.length - 1) {
									app.saveUserChatSnapshot(unsignedMsgList[i].acceptUserId, unsignedMsgList[i].sendUserId, unsignedMsgList[i].msg, false);
								}
								// 将消息ID存到数组中
								ids.push(unsignedMsgList[i].id);
							}
							
							if(ids.length > 0) {
								// 3.对未签收的消息批量签收，用逗号拼接，存到extend字段中
								console.log("批量签收消息...");
								Chat.signMsgList(ids.join(","));
							} else {
								console.log("没有未签收的消息...");
							}
						} else {
							app.showToast(data.msg, "error");
						}
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}
			
			/**
			 * 加载好友聊天快照
			 */
			function loadChatSnapshotList() {
				//console.log("加载好友快照列表...");
				var chatSnapshotUl = document.getElementById("chatSnapshotUl");
				// 从缓存中读取所有的历史聊天记录
				var userinfo = app.getGlobalUserInfo();
				var chatSnapshotList = app.getUserChatSnapshotList(userinfo.id);
				console.log("快照中的内容：" + JSON.stringify(chatSnapshotList));
				var chatItems = [];
				if(chatSnapshotList != null) {
					// 从缓存中获取好友列表
					for(var i = 0; i < chatSnapshotList.length; i++) {
						// 从好友列表中找出对应friendId的好友信息
						var friend = app.getFriendUserinfoFromAddressListById(chatSnapshotList[i].friendUserId);
						if(friend != null) {
							chatItems.push(getChatSnapshotHtml(friend,
															   chatSnapshotList[i].msg, 
															   chatSnapshotList[i].isRead));
							// 如果消息未读，播放消息提示音
							if(!chatSnapshotList[i].isRead) {
								playReceiveMsgSound();
							}
						}
					}
				}
				// 将快照消息渲染到页面上
				chatSnapshotUl.innerHTML = chatItems.join("");
			}
			
			// 播放接收消息的提示音
			function playReceiveMsgSound() {
				var audioPlayer = plus.audio.createPlayer("mp3/receiveMsg.mp3");
				audioPlayer.play();
			}
		</script>
	</body>

</html>
